<template>
    <div class="row">
      <div class="row1">
        <div class="top" style="float: left;">
          <div class="search">
            <el-input  v-model="input" placeholder="搜索你想要的内容" style="width: 300px;"></el-input>
            <el-button type="warning" round @click="onSubmit()">搜索</el-button>
          </div>
          <div class="pic2">
            <div>
              <div class="pic21">
                <img src="http://qoz3190o1.hd-bkt.clouddn.com/src%3Dhttp___bpic.588ku.com_element_origin_min_pic_00_91_84_2256f1844a88731.jpg%26refer%3Dhttp___bpic.588ku.jpg"/>
                <div class="pic22">上传视频</div>
              </div>
            </div>
            <div>
              <div class="pic21">
                <img src="http://qoz3190o1.hd-bkt.clouddn.com/u%3D1091995538%2C4097802728%26fm%3D26%26gp%3D0.jpg"/>
                <div class="pic22">充值抖币</div>
              </div>
            </div>
            <div >
              <div class="pic21" @mouseover="showpic()" @mouseleave="showpic2()">
                <img src="http://qoz3190o1.hd-bkt.clouddn.com/u%3D1416799284%2C860429581%26fm%3D26%26gp%3D0.jpg"/>
                <div  class="pic22">用户</div>
                <div class="pic22"></div>
              </div>
            </div>
          </div>
          <div class="row11">
            最高人气视频
          </div>
        </div>
      </div>
      <div class="row2">
        <div class="row21">
          <li v-for="iteam in players" class="row2111" id="fixed">
            <video controls class="vjs-custom-skin">
              <source class="video" type="video/mp4"
                      :src="iteam.videoUrl"/>
            </video>
          </li>
        </div>
        <!--&lt;!&ndash;&ndash;&gt;<button @click="nextpage(params.page)">下一页</button>-->
        <!--<div @click="nextpage(this.params.page)">下一页</div>-->
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div class="row3">
        <div class="row31">全部的视频</div>
        <div class="row32">
          <div class="row321">
            <li v-for="iteam in videos" class="row3211">
              <video controls class="vjs-custom-skin1">
                <source class="video" type="video/mp4"
                        :src="iteam.videoUrl"/>
              </video>
            </li>
          </div>
        </div>
      </div>
      <div class="row7" style="display:none" >
        <div class="row71">
          <div class="row711">
            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
            <!--<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>-->
          </div>
          <div class="row713"></div>
          <div class="row712">昵称</div>
          <div class="row713"></div>
          <div class="row712">邮箱</div>
        </div>
        <div class="row72">
        </div>
      </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
      name: "videos",
      data() {
        return {
          input: '',
          picshow: 'none',
          players: [],
          videos: [],
          total: 10,
          params: {
            size:5,
            page:1
          },
          paramss: {
            size:15,
            page:1
          },
          currentPage4: 1
        }
      },
      methods:{
        showpic(){
          var pic=document.getElementsByClassName("row7")[0];
          pic.style.display="block";
        },
        showpic2(){
          var pic=document.getElementsByClassName("row7")[0];
          pic.style.display="none";
        },
        nextpage: function (num) {
          this.players = [];
          this.params.page = num + 1;
          axios.post("http://localhost/kd-user/user/findTheMostHotPlaysTopTenWithPage/"+this.params.page+"/"+this.params.size).then(res => {
            if (res.data.code == 200) {
              this.players = res.data.data;
              //self.$previewRefresh();
            }
          })
        },
        most: function () {
          axios.post("http://localhost/kd-user/user/findTheMostHotPlaysTopTenWithPage/"+this.params.page+"/"+this.params.size).then(res => {
            if (res.data.code == 200) {
              this.players = res.data.data;
            }
          })
        },
        all: function () {
          axios.post("http://localhost/kd-user/user/findAllVideos/"+this.params.page+"/"+this.paramss.size).then(res => {
            if (res.data.code == 200) {
              this.videos = res.data.data;
              this.total = res.data.total;
            }
          })
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.videos = [];
          this.paramss.size = val;
          axios.post("http://localhost/kd-user/user/findAllVideos/"+this.params.page+"/"+this.paramss.size).then(res => {
            if (res.data.code == 200) {
              this.videos = res.data.data;
              this.total = res.data.total;
            }
          })
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.videos = [];
          this.params.page = val;
          axios.post("http://localhost/kd-user/user/findAllVideos/"+this.params.page+"/"+this.paramss.size).then(res => {
            if (res.data.code == 200) {
              this.videos = res.data.data;
              this.total = res.data.total;
            }
          })
        }
      },
      mounted() {
        //查找人气最高的主播
        this.most();
        this.all();
      }
    }
</script>

<style scoped>
  .search{
    width: 500px;
    height: 60px;
    margin: auto;
    margin-top: 20px;
  }
  .row1{
    width: 100%;
    height: 130px;
  }
  .row11{
    height: 50px;
    width: 230px;
    font-size: xx-large;
    text-align: right;
    font-weight: bolder;
    font-style: italic;
    color: coral;
  }
  .row2{
    width: 1800px;
    margin: auto;
    margin-top: 0px;
    height: 500px;
  }
  .row3{
       width: 100%;
       margin: auto;
       font-size: xx-large;
       float: left;
      margin-top: 120px;
     }
  .row31{
    font-size: xx-large;
    text-align: right;
    font-weight: bolder;
    font-style: italic;
    color: coral;
    height: 50px;
    float: left;
    width: 200px;
  }
  .row32{
    width: 1800px;
    margin: auto;
    margin-top: 50px;
  }
  .row21{
    width: 1500px;
    height: 1500px;
    background-color: aliceblue;
    margin: auto;
  }
  .row321{
    width: 1500px;
    height: 1500px;
    background-color: aliceblue;
    margin: auto;
  }
  .row2111{
    height: 500px;
    width: 300px;
    float: left;
  }
  .row3211{
    height: 500px;
    width: 300px;
    float: left;
  }
  .pic1 img{
    width: 100%;
    height: 390px;
    float: left;
  }
  .top{
    width: 100%;
    height: 130px;
    position: absolute;
    z-index: 10;
    float: left;
    background: bisque;
  }
  .vjs-custom-skin{
    width: 300px;
    height: 500px;
    margin-top: -17px;
  }
  .vjs-custom-skin1{
    width: 300px;
    height: 500px;
    margin-top: -37px;
  }

  .pic2{
    position: absolute;
    top: 20px;
    right: 30px;
    width: 270px;
    height: 90px;
    float: left;
  }
  .pic21{
    width: 90px;
    height: 90px;
    float: left;
  }
  .pic2 img{
    width: 35px;
    height: 35px;
  }
  .pic22{
    width: 90px;
    height: 30px;
    float: left;
    color: darkslateblue;
  }
  .row7{
    z-index: 10;
    background-color: antiquewhite;
    position: absolute;
    width: 500px;
    height: 300px;
    top: 80px;
    right: 30px;
    border-radius: 75px;
  }

  .row71{
    width: 500px;
    height: 150px;
  }
  .row72{
    width: 500px;
    height: 150px;
  }
  .row711{
    width: 150px;
    height: 150px;
    float: left;
  }
  .row711 img{
    width: 100px;
    height: 100px;
    margin-top: 25px;
    border-radius: 50px;
  }

  .row712{
    width: 100px;
    height: 30px;
    float: right;
    margin-top: 28px;
  }
  .row713{
    width: 250px;
    height: 30px;
    float: right;
    margin-top: 28px;
  }
  .block{
    position: absolute;
    top: 760px;
    left: 750px;
  }
</style>
